<template>
    <div class="order-report-wrapper pageWrap">
        <div style="background: #fff">
            <el-tabs v-model="activeName">
                <el-tab-pane
                    label="pos机借机管理"
                    name="1"
                    v-if="
                        roleId === 1 &&
                        (manageRoleType === 0 ||
                            manageRoleType === 1 ||
                            manageRoleType === 2 ||
                            manageRoleType === 3)
                    "
                >
                    <jieji-record
                        :underLine="underLine"
                        v-show="activeName === '1'"
                    ></jieji-record>
                </el-tab-pane>
                <el-tab-pane label="pos机考核" name="2">
                    <pos-manage
                        :underLine="underLine"
                        v-show="activeName === '2'"
                    ></pos-manage>
                </el-tab-pane>
                <el-tab-pane label="考核结果" name="3">
                    <posManageResult
                        :underLine="underLine"
                        v-show="activeName === '3'"
                    ></posManageResult>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import posManageResult from './page_24_pos_manage/page_24_pos_manage_result.vue'
import posManage from './page_24_pos_manage/page_24_pos_manage_main.vue'
import jiejiRecord from './page_24_pos_manage/page_24_pos_manage_jieji_record.vue'
export default {
    data: function () {
        return {
            activeName: '1'
        }
    },
    mounted () { },
    created () {
        if (this.roleId === 1 &&
            (this.manageRoleType === 0 ||
                this.manageRoleType === 1 ||
                this.manageRoleType === 2 ||
                this.manageRoleType === 3)) {
            this.activeName = '1'
        } else {
            this.activeName = '2'
        }
    },
    watch: {},
    components: {
        posManage,
        jiejiRecord,
        posManageResult
    },
    props: {
        underLine: null
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        }
    },
    methods: {
        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-tabs__nav-wrap::after
    content: ''
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    height: 1px
    background-color: #e4e7ed
    z-index: 1

.el-tabs__nav-scroll
    padding: 0 22px

.order-report-wrapper
    width: 100%

    .order-report-wrapper-title
        width: 100%
        height: 40px
        font-size: 14px
        line-height: 30px
        padding-left: 22px
</style>
